
import React, { useState } from "react"
import style from "./index.module.scss"
type TabData = {
    key: string
    title: string
}
type Props = {
    activeKey?: string
    defaultActiveKey?: string
    tabDatas: TabData[]
    onClick?: (key: string) => void
}

export default function SmartCityTabs(props: Props) {
    const { tabDatas, activeKey, defaultActiveKey = tabDatas[0].key, onClick } = props
    const [actDiv, setActDiv] = useState(defaultActiveKey)
    function clickTab(tab: TabData): void {
        activeKey ? onClick?.(tab.key) : setActDiv(tab.key)
    }
    return (
        <div className={`${style["smart-city-tabs"]} flex h-22 border-b-2 border-[#aeaeae] absolute w-full`}>
            <div className='container flex justify-between mx-auto px-30'>
                {tabDatas.map((tab) => (
                    <div key={tab.key} onClick={() => clickTab(tab)} className={`font-bold tracking-wider h-full flex  items-center relative poin cursor-pointer ${tab.key === (activeKey ? activeKey : actDiv) ? "active" : ""}`}>{tab.title}</div>
                ))}
            </div>
        </div>
    )
}
